<template>
    <div class="root">
        <div class="right">
            <div class="right-inner">
            <!--未登录是侧边栏的状态-->
                <div v-if="show">
                    <div class="m right-inner1">
                        <span class="fa fa-mobile"></span>
                        <input type="text" class="w" v-model="username">
                    </div>
                    <div class="m right-inner2">
                        <span class="fa fa-edit "></span>
                        <input type="password" class="w" v-model="psw">
                    </div>
                    <div class="m">
                        <button class="btn" @click="login">登录</button>
                    </div>
                    <div class="text m btn-buttom">
                        <router-link to="/regist"><span>立即注册</span></router-link>
                        <router-link to="/login"><span>密码登录</span></router-link>
                    </div>
                </div>
            <!--登陆后侧边栏的状态-->
                <div v-else class="usermsg">
                    <div class="avatar">
                        <img :src="avatar?avatar:'static/pic/1.png'" class="useravatar">
                    </div>
                    <div class="user">
                        <router-link to="/usermsg">
                            <span>用户中心</span>
                        </router-link>
                        <span  @click="logout">退出登录</span>
                    </div>
                </div>
                <Divider>导航</Divider>
                <div class="search">
                    <router-link to="/homesearch">
                        <span class="fa fa-search" style="color:#999999"></span>
                        <input type="text" class="w" placeholder="搜索">
                    </router-link>
                </div>
                <div class="daohang text">
                    <div>首页</div>
                    <div v-for="(a,i) in arr" @click="btnclick">{{a}}</div>
                </div>
                <hr>
                <div class="font">
                    <div>
                        <span class="fa fa-download dl"></span>
                        <br>
                        <span class="text">下载</span>
                    </div>
                    <div>
                        <span class="fa fa-edit ed"></span>
                        <br>
                        <span class="text">意见反馈</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import {Divider} from 'vux';
    import axios from 'axios'
    export default{
        // props:["avatar"],
        data:function(){
            return {
                bb:"",
                username:"",
                psw:"",
                show:true,
                avatar:""
            }
        },
        // props:["user","avatar"],
        components:{
            Divider
        },
        computed:{
            ...mapState([
                "arr"
            ])
        },
        methods:{
            logout:function(){
                this.http.post("/user/logout")
                .then(res=>{
                    // console.dir(res);
                    this.bb = res.data.msg;
                    this.$vux.alert.show({
                        title:this.bb,
                        onHide(){
                            location.reload();
                        }
                    })
                })
            },
            login:function(){
                this.http.post('/user/login',{username:this.username,psw:this.psw})
                .then(res=>{
                    // console.dir(res);
                    this.aa = res.data.msg;
                    this.$vux.alert.show({
                        title:this.aa,
                        onHide(){
                            if(res.data.err==0){
                                 location.href="/"
                            }
                        }
                    })
                })
            },
            requsetislogon:function(){
                this.http.post("/user/islogin")
                .then(res=>{
                    if(res.data.err==0){
                        this.show = false;
                        this.avatar = res.data.userInfo.avatar;
                    }
                })
            },
            btnclick:function(e){
                // console.log(e.target.innerHTML);
                if(e.target.innerHTML=="新房"){
                    location.href="/#/houselist/新房";
                }
                if(e.target.innerHTML=="二手房"){
                    location.href="/#/houselist/二手房";
                }
            }
        },
        mounted:function(){
            this.requsetislogon()
        }
        
    }
</script>

<style scoped>
a{
    text-decoration: none;
}
.root{
    display: flex;
    height: 100%;
}
.left{
    width: 30%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.right{
    width: 80%;
    height: 100%;
    text-align: center;
    background-color: white;
}
.btn{
    color: white;
    width: 100%;
    margin: 0 auto;
    background-color:#FF7500; 
    border: none;
    height: 25px;
    border-radius: 4px;
}
.right-inner{
    width: 80%;
    margin:  0 auto;
}
.w{
    width: 85%;
    border: none;
    height: 30px;
    color:#666666;
}
.right-inner1{
    border: 1px solid #999999;
    border-radius: 4px;
    color: #999494;
}
.right-inner2{
    border: 1px solid #999999;
    border-radius: 4px;
    color: #999494;
}
.daohang{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.daohang div {
    width: 45%;
    border:1px solid #eeeeee;
    border-radius: 4px;
    margin:10px 0;
    font-size: 12px;
    padding: 4px;
}
.search{
    border: 1px solid #eeeeee;
    background-color: white;
    border-radius: 4px;
    color: #999999;
}
.font{
    display: flex;
    /*text-align: center;*/
}
.font div:nth-of-type(1){
    width: 50%;
    text-align: center;
}
.dl{
    background-color: #68A5E1;
    color:white;
    border-radius: 50%;
    padding: 10px;
}
.ed{
    background-color: #FF6F6F;
    color:white;
    border-radius: 50%;
    padding: 10px;
}
.text{
    font-size: 14px;
}
.m{
    margin-top: 10px;
}
.btn-buttom{
    display: flex;
    justify-content: space-between;
}
.btn-buttom span{
    width: 50%;
}
.avatar{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /*border: 1px solid black;*/
    margin: 10px auto;
}
.useravatar{
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.usermsg{
    /*border: 1px solid black;*/
    margin-top: 20px;
}
.user{
    /*border: 1px solid black;*/
    margin-top: 20px;
}
.user span:nth-of-type(1){
    background-color:#ff7500;
    width: 50%;
    padding: 5px 8px;
    font-size: 12px;
    color: white;
    border-radius: 4px;
}
.user span:nth-of-type(2){
    display: inline-block;
    width: 50%;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #999999;
    color: #666666;
    border-radius: 4px;
}
</style>